<template>
	<view class="recommend">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://yanxuan.nosdn.127.net/static-union/16653843234a47a0.png?type=webp&imageView&quality=95&thumbnail=1920x420" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image
						src="//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020218/10068786401750/FocusFullshop/CkNqZnMvdDEvMjQ5MzAyLzUvMTczMzIvMTg3ODQ2LzY2YzY1YjhhRjQwN2ZkMjc3L2ViYmI4OTczZDI4NTUwM2IucG5nEgU1MTAtdzABOPqme0ITCg_lpKflrofnoLTlo4HmnLoQAUIQCgzlpb3otKfmsYfogZoQAkIQCgznq4vljbPmiqLotK0QBkIKCgbotoXlgLwQB1jWo7-ThaUC/cr/s/q.jpg"
						mode=""
					></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 三个小图标 -->
		<view class="policyList">
			<view class="policyItem" v-for="item in indexData.policyDescList" :key="item.desc">
				<image :src="item.icon" mode=""></image>
				<text class="desc">{{ item.desc }}</text>
			</view>
		</view>
		<!-- 10个导航图标 -->
		<view class="kingKongList" v-if="indexData.kingKongModule" enable-flex>
			<view class="kingKongItem" v-for="item in indexData.kingKongModule.kingKongList" :key="item.L1Id">
				<image class="kingKongImg" :src="item.picUrl" mode=""></image>
				<view class="kingKongDesc">{{ item.text }}</view>
			</view>
		</view>
		<!-- 分类区 数据：categoryModule -->
		<view class="categoryList" v-if="indexData">
			<view class="categoryItem" v-for="item in indexData.categoryModule" :key="item.titlePicUrl">
				<!-- 大图 -->
				<image class="categoryImg" :src="item.titlePicUrl" mode=""></image>
				<scroll-view class="categoryScroll" scroll-x="true" enable-flex>
					<view class="goodsItem" v-for="goodsItem in item.itemList" :key="goodsItem.id">
						<image class="goodsImg" :src="goodsItem.showPicUrl" mode=""></image>
						<view class="goodsText">{{goodsItem.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {};
	},
	computed: {
		...mapState({
			indexData: (state) => state.home.indexData
		})
	}
};
</script>

<style lang="stylus">
.recommend
	.swiper
		height: 350rpx
		image
			width: 100%
			height: 350rpx
	.policyList
		display: flex
		margin: 10rpx 0
		.policyItem
			flex: 1
			text-align: center
			image
				width: 40rpx
				height: 40rpx
				vertical-align: middle
			.desc
				font-size: 24rpx
	.kingKongList
		display: flex
		flex-wrap: wrap
		.kingKongItem
			width: 20%
			text-align: center
			margin: 10rpx 0
			.kingKongImg
				width: 100rpx
				height: 100rpx
			.kingKongDesc
				font-size: 24rpx
	.categoryList
		.categoryItem 
			margin: 10 0rpx
			.categoryImg
				height: 370rpx
				width: 100%
			.categoryScroll
				//滑块一定要设置高度，否则充满全屏
				height: 300rpx
				display: flex
				//不换行
				white-space: nowrap
				.goodsItem
						height: 300rpx
						margin: 0 5rpx
					.goodsImg
						width: 200rpx
						height: 200rpx
						background-color: #f5f5f5
					.goodsText
						font-size: 26rpx
						//换行，超出两行。。。。
						white-space: pre-wrap
						overflow: hidden
						text-overflow: ellipsis
						display: -webkit-box
						-webkit-box-orient: vertical
						-webkit-line-clamp: 2
		
</style>

